<template>
	<view class="container u-skeleton">
		<u-swiper 
			class="u-skeleton-rect"
			:list="swiperList"
			name="imageUrl"
			mode="round" 
			indicator-pos="bottomRight" 
			height="350"
			border-radius="0"
		></u-swiper>
		<!-- 菜单栏 -->
		<view class="menus">
			<navigator 
				v-for="(item,index) in menusList" 
				:key="index" 
				:url="item.link" 
				open-type="reLaunch" 
				class="menu_item u-skeleton-fillet">
				<view class="left">
					<text>{{ item.name }}</text>
					<text>{{ item.description }}</text>
				</view>
				<view class="right">
					<image :src="item.imageUrl" mode=""></image>
				</view>
			</navigator>
		</view>
		<!-- 通知栏 -->
		<u-notice-bar 
			class="u-skeleton-rect"
			mode="vertical" 
			:duration="4000" 
			:list="noticeList" 
			:more-icon="true"
			type="none"
			bg-color="#fff"
			color="#ff9900"
			@click="newsClick"
			@getMore="getMoreNews"
		></u-notice-bar>
		<!-- 服务栏 -->
		<view class="serve">
			<navigator 
				v-for="(item, index) in serveMenus" 
				:key="index" 
				:url="item.link" 
				open-type="reLaunch" 
				class="serve_l u-skeleton-fillet"
				v-if="item.id == '9'">
				<image :src="item.imageUrl"></image>
				<!-- <text>中医调理</text> -->
			</navigator>
			<view class="serve_r">
				<navigator 
					v-for="(item, index) in serveMenus" 
					:key="index" 
					:url="item.link" 
					open-type="reLaunch" 
					class="right_txt u-skeleton-fillet"
					v-if="item.id != '9'">
					<image :src="item.imageUrl"></image>
					<!-- <text>{{ item.name }}</text> -->
				</navigator>
			</view>
		</view>
		<view class="news" style="padding-bottom: 60rpx;">
			<view class="news_header u-skeleton-rect">
				<text>十二时辰养生表</text>
				<navigator url="">
					<u-icon name="arrow-right"></u-icon>
				</navigator>
			</view>
			<view class="pie">
				<view class="canvas-content">
					<canvas class="canvas" :width="width" :height="height" canvas-id="myCanvas" id="myCanvas"></canvas>
				</view>
				<cover-image class="pie-img" src="/static/ys.png"></cover-image>
			</view>
		</view>
		<!-- 协会新闻 -->
		<view class="news" v-if="newsList.length">
			<view class="news_header u-skeleton-rect">
				<text>协会新闻</text>
				<navigator url="../notice/notice?cur=1" open-type="reLaunch">
					<u-icon name="arrow-right"></u-icon>
				</navigator>
			</view>
			<view class="news_body">
				<view class="news_item u-skeleton-rect" @click="pageTo(item.id)" v-for="(item, index) in newsList" :key="index">
					<view class="item_img">
						<image :src="item.imageUrl" mode=""></image>
					</view>
					<view class="item_txt">
						<view class="">
							<text class="title">{{ item.title }}</text>
							<text class="desc">{{ item.description }}</text>
						</view>
						<text class="time">{{ item.createtime_text }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 会员风采 -->
		<view class="news" v-if="memberList.length">
			<view class="news_header">
				<text>会员风采</text>
				<navigator url="../notice/notice?cur=2" open-type="reLaunch">
					<u-icon name="arrow-right"></u-icon>
				</navigator>
			</view>
			<view class="elegant_demeanor">
				<view 
					class="elegant_demeanor_item" 
					@click="previewImg(item.id)" 
					v-for="(item,index) in memberList" 
					:key="index">
					<image :src="item.imageUrl" mode=""></image>
					<text class="title">{{ item.title }}</text>
					<!-- <view class="nums">
						<u-icon name="photo"></u-icon>
						<text>2张</text>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="nomore">
			<u-divider half-width="50">没有更多了</u-divider>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import { IndexData } from '../../api/api'
	export default {
		data() {
			return {
				swiperList: [],
				menusList: [{},{},{},{}],
				serveMenus: [{id: 9},{},{}],
				newsList: [{},{},{},{}],
				memberList: [],
				noticeList: [''],
				loading: true, // 是否显示骨架屏组件
				width: 300,
				height: 300,
				interval: null
			}
		},
		onLoad() {
			this.getIndexData()
			this.interval = setInterval(() => {
				this.initData()
			}, 1000)
		},
		onReady() {
			this.$nextTick(() => {
				this.initData()
			});
		},
		onUnload() {
			this.interval = null
		},
		methods: {
			// 获取首页数据
			getIndexData () {
				IndexData().then(res => {
					if (res.code == 1) {
						this.noticeList= []
						res.data.roll_news.map((el, k) => {
							this.noticeList.push(el.title)
						})
						this.swiperList = res.data.home_top_banner
						this.menusList = res.data.top_menu
						this.serveMenus = res.data.lower_menu
						this.newsList = res.data.roll_news
						this.memberList = res.data.member_intro
						setTimeout(() => {
							this.loading = false
						}, 300)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 新闻详情页
			pageTo (id) {
				uni.navigateTo({
					url: `/pages/notice/news_detail?id=${id}`
				})
			},
			// 会员风采
			previewImg (id) {
				uni.navigateTo({
					url: '/pages/notice/member_detail?id=' + id
				})
			},
			// 通知栏消息更多
			getMoreNews () {
				uni.reLaunch({
					url: '/pages/notice/notice?cur=1'
				})
			},
			// 通知栏消息点击
			newsClick (e) {
				console.log()
				uni.navigateTo({
					url: '/pages/notice/news_detail?id=' + this.newsList[e].id
				})
			},
			initData() {
				var ctx = uni.createCanvasContext('myCanvas')
				var w = 300;
				var h = 300;
				/*分成几等分*/
				let timeArr = [0,2,4,6,8,10,12,14,16,18,20,22]
				var num = timeArr.length;
				/*一份多少弧度*/
				var angle = Math.PI * 2 / num;
				/*原点坐标*/
				var x0 = w / 2;
				var y0 = h / 2;
				/*上一次绘制的结束弧度等于当前次的起始弧度*/
				for (var i = 0; i < timeArr.length; i++) {
				    var startAngle = i * angle + 4.45;
				    var endAngle = (i + 1) * angle + 4.45;
				    ctx.beginPath();
				    ctx.moveTo(x0, y0);
				    ctx.arc(x0, y0, 150, startAngle, endAngle);
				    /*随机颜色*/
				    ctx.fillStyle = this.linghtArea(timeArr[i]);
				    ctx.fill();
				}
				let that = this;
				ctx.draw()
			},
			// 高亮当前时间区域
			linghtArea(i) {
				let date = new Date();
				let hour = date.getHours();
				if(hour%2 !== 0 && hour <= 22) {
					hour += 1
				} else if (hour > 22) {
					hour = 0
				}
				return hour == i ? '#2c00bd' : '#fff'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #f2f2f2;
	}
	/deep/ .u-notice-bar {
		height: 90rpx;
	}
	.menus {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		background-color: #fff;
		padding: 25rpx 25rpx 0;
		margin-top: 15rpx;
		.menu_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 39%;
			// width: 277rpx;
			padding: 30rpx;
			margin-bottom: 25rpx;
			// box-shadow: 0 0 10rpx 5rpx #f7f7f7;
			border: 1px solid #f3f3f3;
			border-radius: 8rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
			.left {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				text:first-child{
					font-size: 32rpx;
					margin-bottom: 10rpx;
					color: #333;
				}
			}
		}
	}
	.serve {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 25rpx;
		background-color: #fff;
		margin-top: 15rpx;
		.serve_l {
			position: relative;
			width: 48%;
			image {
				width: 100%;
				height: 336rpx;
				border-radius: 8rpx;
			}
			text {
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translate(-50%, 0);
				color: #fff;
				font-size: 32rpx;
			}
		}
		.serve_r {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 48%;
			image {
				width: 100%;
				height: 155rpx;
				border-radius: 8rpx;
			}
			.right_txt {
				position: relative;
				text {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -70%);
					// color: #fff;
					font-size: 32rpx;
				}
			}
		}
	}
	.news {
		width: 100%;
		background-color: #fff;
		margin-top: 15rpx;
		padding: 0 25rpx;
		.news_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 30rpx 0;
			text {
				position: relative;
				font-size: 32rpx;
				font-weight: 700;
				padding-left: 30rpx;
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 8rpx;
					height: 100%;
					border-radius: 4rpx;
					background-color: #4CD964;
				}
			}
			navigator {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: right;
			}
		}
		.news_body {
			width: 100%;
			.news_item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #eee;
				padding: 0 0 20rpx;
				margin-bottom: 20rpx;
				.item_txt {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 100%;
					.title {
						display: block;
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}
					.desc {
						display: block;
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						color: #999;
					}
					.time {
						color: #999;
						margin-top: 10rpx;
					}
				}
				.item_img {
					width: 180rpx;
					height: 140rpx;
					margin-right: 20rpx;
					image {
						width: 180rpx;
						height: 140rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
		.elegant_demeanor {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			.elegant_demeanor_item {
				position: relative;
				width: 48%;
				margin-bottom: 30rpx;
				box-shadow: 0 0 10rpx 5rpx #f7f7f7;
				border-radius: 8rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 320rpx;
				}
				.title {
					display: block;
					width: 100%;
					padding: 15rpx 0 15rpx 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.nums {
					position: absolute;
					bottom: 90rpx;
					right: 10rpx;
					display: flex;
					background-color: rgba(0,0,0, .5);
					border-radius: 30rpx;
					color: #fff;
					padding: 5rpx 20rpx;
					text {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	.nomore {
		background-color: #fff;
		padding: 30rpx 0;
	}
	.pie{//这里画一个圆
	    position: relative;
	    margin: 1em auto 0;
	    padding: 0;
	    width: 300px;
	    height: 300px;
	    border-radius: 50%;
	    list-style: none;
	}
	.pie-img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 315px;
		height: 315px;
		transform: translate(-50%, -50%);
		z-index: 10;
	}
	.canvas {
		width: 300px;
		height: 300px;
		z-index: 9;
		// transform: rotate(-105deg);
	}
</style>
